<template>
	<gui-page :customHeader="true" :headerClass="['gui-bg-white']" ref="guiPage" :fullPage="true">
		<!-- 自定义头部导航 -->
		<template v-slot:gHeader>
			<view style="height:44px;" class="gui-flex gui-nowrap gui-rows gui-align-items-center">
				<!-- 使用组件实现返回按钮及返回首页按钮 -->
				<gui-header-leading :home="false"></gui-header-leading>
				<!-- 导航文本此处也可以是其他自定义内容 -->
				<view style="width:44rpx;"></view>
				<text class="gui-flex1 gui-text-center gui-ellipsis">派单</text>
				<!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
				<!-- 实际宽度请根据自己情况设置 -->
				<view style="width:120rpx;"></view>
				<!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
			</view>
		</template>

		<template v-slot:gBody>
			<view class="gui-relative">
				<view class="hulu-main">

					<view class="gui-padding">
						<text class="gui-text gui-color-black">维修信息</text>
					</view>
					<view class="hulu-bg-color5">
						<u-grid :border="true" :align="'center'">
							<u-grid-item bgColor="#68a6ec">
								<view class="info" style="font-weight: bolder;">
									<view class="hulu-text-color3 hulu-font-4 gui-text-center hulu-primary-color1">单号
									</view>
									<view class="hulu-text-color7 gui-margin-top"
										style="font-size: 24rpx;word-break: break-all;">
										{{repair.order_no}}
									</view>
								</view>
							</u-grid-item>
							<u-grid-item bgColor="#68a6ec">
								<view class="info" style="font-weight: bolder;">
									<view class="hulu-text-color3 hulu-font-4 gui-text-center hulu-primary-color1">车牌
									</view>
									<view class="gui-margin-top" style="word-break: break-all;">
										{{repair.license}}
									</view>
								</view>
							</u-grid-item>
							<u-grid-item bgColor="#68a6ec">
								<view class="info" style="font-weight: bolder;">
									<view class="hulu-text-color3 hulu-font-4 gui-text-center hulu-primary-color1">电话
									</view>
									<view class="hulu-text-color7 gui-margin-top" style="word-break: break-all;">
										{{repair.phone}}
									</view>
								</view>
							</u-grid-item>
							<u-grid-item bgColor="#68a6ec">
								<view class="info" style="font-weight: bolder;">
									<view class="hulu-text-color3 hulu-font-4 gui-text-center hulu-primary-color1">联系人
									</view>
									<view class="hulu-text-color7 gui-margin-top" style="word-break: break-all;">
										{{repair.user_name}}
									</view>
								</view>
							</u-grid-item>
							<u-grid-item bgColor="#68a6ec">
								<view class="info" style="font-weight: bolder;">
									<view class="hulu-text-color3 hulu-font-4 gui-text-center hulu-primary-color1">描述
									</view>
									<view class="hulu-text-color7 gui-margin-top" style="word-break: break-all;">
										{{repair.description}}
									</view>
								</view>
							</u-grid-item>
							<u-grid-item bgColor="#68a6ec">
								<view class="info" style="font-weight: bolder;">
									<view class="hulu-text-color3 hulu-font-4 gui-text-center hulu-primary-color1">位置
									</view>
									<view class="hulu-text-color7 gui-margin-top"
										style="font-size: 24rpx;word-break: break-all;">
										{{repair.address}}
									</view>
								</view>
							</u-grid-item>
						</u-grid>
					</view>
					<view class="form gui-padding gui-bg-white gui-margin-top">
						<up-form labelPosition="left" :model="state.model" :rules="state.rules" ref="formRef1"
							style="z-index:1;">
							
							<up-form-item label="车位" prop="ticketState.parking_id" borderBottom @click="showParking">
								<view class="gui-flex gui-justify-content-start gui-align-items-center">
									{{state.model.ticketState.parking_id}}
								</view>
								<template #right>
									<up-icon name="arrow-right"></up-icon>
								</template>
							</up-form-item>
							<up-form-item label="车型" prop="ticketState.kind_id" borderBottom @click="showKind">
								<view class="gui-flex gui-justify-content-start gui-align-items-center">
									{{state.model.ticketState.kind_id}}
								</view>
								<template #right>
									<up-icon name="arrow-right"></up-icon>
								</template>
							</up-form-item>

							<up-form-item label="服务" prop="ticketState.service_ids" borderBottom>
								<view class="">
									<next-search-select :multiple="true" :list="state.serviceopts" label-key="name"
										value-key="id" placeholder="选择服务" title="服务列表" @visibleChange="visibleChange"
										v-model:value="state.model.ticketState.service_ids" @search="searchFunc"
										clearable></next-search-select>

								</view>
							</up-form-item>
							<up-form-item label="人员" prop="ticketState.user_ids" borderBottom>
								<next-search-select :multiple="true" :list="state.useropts" label-key="name"
									value-key="id" placeholder="选择维修工" title="维修工列表" @visibleChange="visibleChange1"
									v-model:value="state.model.ticketState.user_ids" @search="searchFunc1"
									clearable></next-search-select>
							</up-form-item>

							<view class="gui-margin-top">
								<button type="default" style="border-radius:80rpx;" @tap="onSubmit"
									class="gui-button  gui-bg-orange1 gui-noborder">
									<text class="gui-color-white gui-button-text">立即派单</text>
								</button>
							</view>
						</up-form>
					</view>


					<gui-popup ref="guipopup2" width="700rpx" :duration="100">
						<view class="gui-bg-white" style="width:700rpx;height: 800rpx;">
							<view class="" style="height: 20rpx;">

							</view>
							<view class="hulu-text-color1 hulu-font-2  gui-text-center gui-padding">
								选择车位
							</view>
							<scroll-view scroll-y="true" style="height: 780rpx">
								<view>
									<radio-group @change="radioChange">
										<u-grid :border="true" :col="3" align="left">
											<u-grid-item v-for="(p,ind) in state.parkingopts" style="height:60rpx;"
												:key="ind">
												<view class="" style="height:80rpx;">
													<label style="height:60rpx;">
														<radio :key="ind" :value="p.id">
															{{p.parking_type}}{{p.no}}
														</radio>
													</label>
												</view>
											</u-grid-item>
										</u-grid>
									</radio-group>
								</view>
							</scroll-view>

						</view>

					</gui-popup>
					<gui-popup ref="guipopup3" width="700rpx" :duration="100">
						<view class="gui-bg-white" style="height: 800rpx;">
							<view class="hulu-text-color1 hulu-font-2  gui-text-center gui-padding">
								选择车型
							</view>
							<scroll-view scroll-y="true" style="height: 780rpx">
								<view class="gui-padding-x">
									<radio-group @change="radioChange2">
										<label class="gui-border-b" v-for="(item, index) in state.kindopts"
											:key="item.id">
											<view class="gui-flex  gui-padding">
												<radio :value="item.id"></radio>
												<text class="gui-list-title gui-border-b">{{item.union_name}}</text>
											</view>
										</label>
									</radio-group>
								</view>
							</scroll-view>
						</view>
					</gui-popup>


				</view>
				<view class="" style="height:68rpx;">

				</view>
			</view>
		</template>
	</gui-page>
</template>
<script>
	import useRepair from "@/api/repair"
	import useOpt from "@/api/option";
	import useTicket from "@/api/ticket";
	import graceJS from '@/Grace6/js/grace.js';
	const {
		showRepair
	} = useRepair()
	const {
		getOpt,
		loadUserOpt,
		loadServiceOpt
	} = useOpt()
	const {ticketStart} = useTicket()
	export default {
		data() {
			return {
				repair: {},
				state: {
					showParking: false,
					showKind: false,
					showType: false, //正常或者异常维修
					wayopts: [],
					parkingopts: [],
					kindopts: [],
					serviceopts: [],
					useropts: [],
					model: {
						ticketState: {
							repair_id: null,
							parking_id: null,
							kind_id: 1,
							ticket_type: 1,
							service_ids: [],
							user_ids: [],
							state:1,
						},
					},
					rules: {
						'ticketState.service_ids': {
							type: 'array',
							required: true,
							message: '请选服务',
							trigger: ['blur', 'change'],
						},
						'ticketState.user_ids': {
							type: 'array',
							required: true,
							message: '请选维修工',
							trigger: ['blur', 'change'],
						},
						'ticketState.parking_id': {
							type: 'number',
							required: true,
							message: '请填库位',
							trigger: ['blur', 'change'],
						},
						'ticketState.kind_id': {
							type: 'number',
							required: true,
							message: '请填类型',
							trigger: ['blur', 'change'],
						},
					},
				},

			}
		},
		created() {

		},
		async mounted() {
			const {
				data
			} = await getOpt()
			this.state.parkingopts = data.parkings
			this.state.kindopts = data.kinds
		},
		onLoad(option) {
			this.state.model.ticketState.repair_id = +(option.id)
			this.getPaire()
		},
		methods: {
			visibleChange() {},
			visibleChange1() {},
			async searchFunc1(val) {
				console.log("搜索的关键字：", val)
				uni.showLoading({
					title: '请稍后...',
					icon: 'none'
				})
				// 模拟ajax请求
				const res = await loadUserOpt(val)
				this.state.useropts = res.data
				uni.hideLoading()
			},
			async searchFunc(val) {
				console.log("搜索的关键字：", val)
				uni.showLoading({
					title: '请稍后...',
					icon: 'none'
				})
				// 模拟ajax请求
				const res = await loadServiceOpt(val)
				this.state.serviceopts = res.data
				uni.hideLoading()
			},

			radioChange(e) {
				this.state.model.ticketState.parking_id = (+e.target.value)
				this.$refs.guipopup2.close()
			},
			radioChange2(e) {
				this.state.model.ticketState.kind_id = (+e.target.value)
				this.$refs.guipopup3.close()
			},
			showParking() {
				this.$refs.guipopup2.open()
			},
			showKind() {
				this.$refs.guipopup3.open()
			},

			async getPaire() {
				const {
					data
				} = await showRepair(this.state.model.ticketState.repair_id)
				this.repair = data
			},
			onTapImage(i) {
				uni.previewImage({
					current: i + 1,
					urls: this.ticket.repair.images
				})
			},
			onSubmit() {
				console.log(this.state.model.ticketState)
				this.$refs.formRef1.validate().then(async valid => {
					if (valid) {
						uni.$u.toast('校验通过')
						await ticketStart(this.state.model.ticketState)
						this.$refs.formRef1.resetFields()
					} else {
						uni.$u.toast('校验失败')
					}
				}).catch((e) => {
					// 处理验证错误  
					console.error(e)
					uni.$u.toast('校验失败')
				});

			},

		},
	}
</script>
<style lang="scss">
	.hulu-main {
		padding: 0 24rpx;
		box-sizing: border-box;

		.info {
			height: 200rpx;
			box-sizing: border-box;
		}
	}
</style>